<template>
    <div class="home">
      <div>
        <van-swipe :autoplay="3000" lazy-render>
          <van-swipe-item v-for="image in images" :key="image">
            <img :src="image" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="con">
        <div class="con-wrap" v-for="item1 in homeData" :key="item1.cateId">
          <div class="con-title">{{item1.cateName}}</div>
          <div class="content-wrap">
            <div
              class="con-content"
              v-for="item2 in item1.cateData"
              :key="item2.name" 
              @click="toDetail(item2)"
            >
              <div class="content-name">{{item2.name}}</div>
              <div class="content-img">
                <img :src="item2.img" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import { getCurrentInstance, reactive, toRefs } from 'vue'
  import router from '../router/index'
  export default {
    setup () {
      const { proxy } = getCurrentInstance()
  
      const images = [
        'https://i.loli.net/2021/12/03/xw3i8yEzoLDUedf.jpg',
        'https://i.loli.net/2021/12/03/EbFZWiH1RV94OK6.jpg',
        'https://s3.bmp.ovh/imgs/2021/12/fb13e02bfd2383dd.jpg',
        'https://s3.bmp.ovh/imgs/2021/12/f331c7187943665a.jpg',
      ];
  
      const state = reactive({
        homeData: []
      })
  
      const getHomeData = () => {
        proxy.$axios.get('/homedata').then(res => {
          // console.log(res);
          state.homeData = res.dataList;
          localStorage.setItem('lists', JSON.stringify(res.dataList));
        })
      }
      if (localStorage.getItem('lists')) {
        state.homeData = JSON.parse(localStorage.getItem('lists'))
      } else {
        getHomeData();
      }
  
  
      const toDetail = (goods) => {
        if (localStorage.getItem('isLogin')) {
          //传参用query方式
          router.push({ path: 'Detail', query: goods })
        } else {
          proxy.$toast('请先登录')
          setTimeout(() => {
            router.push('/login')
          }, 500)
        }
      }
      return {
        images,
        ...toRefs(state),
        getHomeData,
        toDetail
      };
    },
  }
  </script>
  
  <style scoped>
  @media screen and (max-width: 380px) {
  .con-content {
    width: 8rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    flex: 1;
  }
  }
  .home {
    height: 100vh;
    overflow-y: scroll;
    overflow-x: hidden;
  }
  .van-swipe-item {
    height: 240px;
  }
  .van-swipe-item img {
    width: 100%;
    height: 100%;
  }
  .con {
    padding-bottom: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .con-wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
  .con-title {
    width: 100%;
    color: rebeccapurple;
    padding: 0.625rem;
    font-size: 30px;
    margin-left: 0.625rem;
    font-weight: bold;
    border-bottom: 1px solid #ccc;
    margin-bottom: 0.625rem;
  }
  .content-wrap {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 0.625rem 0.9375rem;
  }
  .con-content {
    width: 8rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    flex: 1;
  }
  .content-name {
    width: 6.25rem;
    font-size: 20px;
    color: black;
    padding: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .content-img {
    width: 220px;
    height: 210px;
  }
  .content-img img {
    width: 100%;
    height: 100%;
  }
  </style>